<template>
<view class="tabbar_box">
  <view class="footer_box">
    <view :class="isIphoneX?'footer isIphoneX-footer':'footer'">
      <!-- <view
        :class="weakIndex==index ? 'text on' : 'text'" 
        v-for="(item,index) in list"
        :key="index"
        @click="switchTab(index,item)">
          <image class="img" :src="weakIndex==index ? item.selectedIconPath : item.iconPath" alt=""></image>
          <view class="wenzi">{{item.text}}</view>
        </view> -->
      <view :class="weakIndex==0 ? 'text on' : 'text'" @click="switchTab(0,home)">
        <image class="img" :src="weakIndex==0 ? home.selectedIconPath : home.iconPath" alt=""></image>
        <view class="wenzi">首页</view>
      </view>
      <view class="text2" @click="goWeak">
        <image class="img2" :src=" weak.selectedIconPath" alt=""></image>
        <view class="wenzi">名酒专区</view>
      </view>
      <view :class="weakIndex==2 ? 'text on' : 'text'" @click="switchTab(2,my)">
        <image class="img" :src="weakIndex==2 ? my.selectedIconPath : my.iconPath" alt=""></image>
        <view class="wenzi">我的</view>
      </view>

    </view>
  </view>
</view>
</template>

<script>
export default {
  props: ['weakIndex'],
  data() {
    return {
      isIphoneX: false,
      tabIndex: 0,
      showPath: '/static/images/tabbar/main.png',
      home: {
        pagePath: '/pages/home/main',
        text: '首页',
        iconPath: '/static/images/tabbar/home.png',
        selectedIconPath: '/static/images/tabbar/home_hover.png',
      },
      weak: {
        pagePath: '/pages/famousWineAreaList/main',
        text: '分类',
        iconPath: '/static/images/tabbar/main.png',
        selectedIconPath: '/static/images/tabbar/main.png',
      },
      my: {
        pagePath: '/pages/my/main',
        text: '我的',
        iconPath: '/static/images/tabbar/my.png',
        selectedIconPath: '/static/images/tabbar/my_hover.png',
      }
    }
  },
  methods: {
    goWeak(){
      wx.navigateTo({
              url: `/pages/famousWineAreaList/main`
          });
    },
    /*
     *功能：底部栏目切换
     *
     * */
    switchTab(index, item) {
      const url = item.pagePath
      console.log('url', url)
      wx.switchTab({
        url
      })
    },
  },
  onHide() {},
  onLoad() {
    /*
     *功能：判断手机机型，动态给底部添加样式
     *
     * */
    wx.getSystemInfo({
      success: res => {
        console.log('手机信息res5' + res.model)
        let modelmes = res.model;
        if (modelmes.search("iPhone 12") != -1) {
          this.isIphoneX = true
        }
        if (modelmes.search("iPhone 11") != -1) {
          this.isIphoneX = true
        }
        if (modelmes.search("iPhone X") != -1) {
          this.isIphoneX = true
        }
        if (modelmes.search("iPhone XR") != -1) {
          this.isIphoneX = true
        }
        if (modelmes.search("iPhone XS") != -1) {
          this.isIphoneX = true
        }
      }
    });
  },
  onUnload() {},
  created() {}
};
</script>

<style scoped>
.tabbar_box {
  width: 100%;
  position: fixed;
  z-index: 99;
  bottom: 0
}

.footer_box {
  width: 100%;
  background: #fff;
}

.footer_box .footer {
  position: relative;
  width: 100%;
  display: flex;
  height: 110rpx;
  justify-content: space-between;
  align-items: center;
  /* border-top:1px solid #eee; */
  /* box-shadow: 10rpx 10rpx 10rpx 16rpx #f2f3f7; */
  z-index: 99999;
  text-align: center;
  position: relative;
}

.footer_box .footer .text .img {
  width: 58rpx;
  height: 58rpx;
  margin-bottom: 6rpx;
  margin: 0 auto;
}

.footer_box .footer .text2 .img2 {
  width: 104rpx;
  height: 104rpx;
  border-radius: 50%;
  /* margin-bottom:6rpx; */
  margin: 0 auto;
}

.footer_box .footer .text {
  width: 25%;
  text-align: center;
  font-size: 20rpx;
  color: #919aa7
}

.footer_box .footer .text2 {
  position: absolute;
  width: 25%;
  text-align: center;
  font-size: 20rpx;
  color: #919aa7;
  left: 50%;
  top: 17px;
  transform: translate(-50%, -50%);
}

.on {
  pointer-events: none;
}

.on .wenzi {
  color: #ee4133;
}

.isIphoneX-footer {
  padding-bottom: 40rpx;
}
</style>
